Uploading Images and Files Using Firebase Storage in React Native

Course: React Native Training

Topic: Uploading Images and Files Using Firebase Storage

Course Link: React Native Training at JustAcademy

Demo Registration: Register for a Free Course Demo

General Website: JustAcademy Official Website

1. Introduction to Firebase Storage

Firebase Storage, also known as Cloud Storage for Firebase, is a cloud-based file storage service that allows developers to upload, store, manage, and retrieve user-generated content such as profile pictures, product images, documents, audio files, videos, and other files.

In React Native applications, Firebase Storage can be integrated to provide file upload functionality without requiring developers to build and maintain their own file storage server.

For example, a social media application may allow users to upload profile pictures, a shopping application may store product images, and a document management application may allow users to upload PDF files.

1.1 Why Firebase Storage Is Used

• Cloud-based storage: Files are stored remotely rather than only on the user's device.
• Scalability: Supports applications that need to store growing amounts of user content.
• Firebase integration: Works with Firebase Authentication, Cloud Firestore, and other Firebase services.
• Access control: Security Rules can restrict who can upload, download, update, or delete files.
• Download URLs: Applications can retrieve URLs to display or access uploaded files.
• Metadata support: File information such as content type, size, and storage path can be managed.

1.2 Common Use Cases

2. Learning Objectives

After completing this topic, learners should be able to:

• Explain Firebase Storage and its role in React Native development.
• Configure Firebase Storage in a React Native or Expo project.
• Install and configure the required packages.
• Select images and files from a device.
• Upload selected files to Firebase Storage.
• Generate and use download URLs.
• Display uploaded images in a React Native application.
• Save file metadata and storage paths in Cloud Firestore.
• Implement upload progress, loading indicators, and error handling.
• Apply security rules and file validation practices.

3. Understanding Firebase Storage Architecture

Firebase Storage stores files inside a cloud storage bucket. Files are organized using paths that resemble folders. These paths help developers organize files by user, feature, or file category.

3.1 Main Components

3.2 How the Upload Process Works

1. The user selects an image or document from the device.
2. The application receives the selected file information.
3. The application validates the file type and size.
4. The application creates a reference to a location in Firebase Storage.
5. The file data is uploaded to the storage bucket.
6. The application retrieves the download URL or records the storage path.
7. The application optionally saves the URL, path, and other metadata in Cloud Firestore.
8. The uploaded content can then be displayed or accessed according to the security rules.

4. Prerequisites

Before implementing file uploads, make sure you have the following:

• Basic knowledge of JavaScript and React Native.
• A React Native or Expo project.
• A Firebase project created in the Firebase Console.
• Firebase Authentication configured if uploads should be restricted to signed-in users.
• Cloud Storage enabled and configured for the Firebase project.
• Appropriate Storage Security Rules.
• A device or emulator for testing the application.

4.1 Create a Firebase Project

1. Open the Firebase Console.
2. Create a new Firebase project or open an existing project.
3. Register your application if it has not already been registered.
4. Open the Storage section and follow the setup process for the project's bucket.
5. Review the project's billing plan, bucket configuration, and regional settings.
6. Configure Storage Security Rules before allowing real users to upload files.

Important: Cloud Storage setup and availability can depend on the Firebase project configuration, billing plan, and current Firebase requirements. Review the console instructions for your project.

5. Installing Firebase and File Selection Packages

For Expo applications, the Firebase JavaScript SDK is commonly used for supported Firebase services. The exact file selection and upload approach depends on the SDK and whether the application uses Expo or React Native Firebase.

5.1 Install Firebase

npx expo install firebase

If your application uses Expo's document picker and image picker, install the relevant packages as well:

npx expo install expo-image-picker expo-document-picker expo-file-system

Package APIs can differ between Expo SDK versions. Check the documentation for the version installed in your project, especially when converting a local file URI into data that the Firebase SDK can upload.

5.2 What These Packages Do

Note: A picker usually returns a local URI, not necessarily a JavaScript File or Blob object. The Firebase JavaScript SDK's uploadBytes() accepts supported binary data such as a Blob. Your application must convert or obtain the selected file data in a compatible way.

6. Configure Firebase in React Native

Create a central Firebase configuration file so that Firebase services can be reused across screens and components.

6.1 Create firebaseConfig.js

// firebaseConfig.js
import { initializeApp, getApp, getApps } from "firebase/app";
import { getStorage } from "firebase/storage";

const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_PROJECT_ID.firebaseapp.com",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
  appId: "YOUR_APP_ID"
};

const app = getApps().length ? getApp() : initializeApp(firebaseConfig);

export const storage = getStorage(app);

Replace the placeholder values with the configuration for your own Firebase project. The Storage bucket value should match the bucket configured in the Firebase Console.

6.2 Why Centralized Configuration Matters

• Prevents repeated initialization of the same Firebase application.
• Allows different screens to reuse the same Storage instance.
• Makes configuration easier to maintain.
• Reduces duplicated code.
• Provides a consistent place to configure other Firebase services.

Firebase client configuration is not a substitute for security. Access to files must be controlled through Firebase Security Rules and appropriate authentication.

7. Selecting an Image with Expo Image Picker

The image picker lets users select an image from their device's media library. The returned asset commonly contains information such as a local URI, file name, media type, and file size when available.

7.1 Basic Image Selection Example

import * as ImagePicker from "expo-image-picker";

export async function selectImage() {
  const permission =
    await ImagePicker.requestMediaLibraryPermissionsAsync();

  if (!permission.granted) {
    throw new Error("Media library permission was not granted.");
  }

  const result = await ImagePicker.launchImageLibraryAsync({
    mediaTypes: ["images"],
    allowsEditing: true,
    quality: 0.8
  });

  if (result.canceled) {
    return null;
  }

  return result.assets[0];
}

7.2 Understanding the Result

Do not assume that every picker or platform returns every property. Validate the information your application actually receives.

8. Converting a Local URI into Uploadable Data

Firebase Storage's JavaScript SDK provides uploadBytes() for uploading supported binary data. A local URI returned by Expo Image Picker is not itself the image's binary content, so it needs to be read or converted into a compatible format.

8.1 Convert a Local URI to a Blob

The following helper demonstrates the common fetch-and-Blob pattern used in supported React Native and Expo environments. Test it on your target platforms and SDK versions. If the environment does not support this conversion reliably, use a platform-compatible file-reading or upload implementation.

export async function uriToBlob(uri) {
  const response = await fetch(uri);

  if (!response.ok) {
    throw new Error("Unable to read the selected file.");
  }

  return await response.blob();
}

8.2 Why Conversion Is Needed

• The picker provides a reference to a local resource.
• The upload method requires the file data in an accepted format.
• Conversion makes it possible to pass the binary content to uploadBytes().
• Different platforms and file providers may require different file-reading approaches.

For large files, avoid unnecessary conversions that create several copies of the file in memory. Consider an upload mechanism suited to the target platform and file size.

9. Uploading an Image to Firebase Storage

To upload an image, create a storage reference, obtain compatible binary data, and call uploadBytes(). After the upload completes, use getDownloadURL() when the application needs a URL to display the image.

9.1 Basic Upload Function

import {
  ref,
  uploadBytes,
  getDownloadURL
} from "firebase/storage";
import { storage } from "./firebaseConfig";
import { uriToBlob } from "./fileHelpers";

export async function uploadImage(asset, userId) {
  if (!asset?.uri) {
    throw new Error("No image was selected.");
  }

  const blob = await uriToBlob(asset.uri);
  const fileName = `image-${Date.now()}.jpg`;
  const storagePath = `users/${userId}/images/${fileName}`;

  try {
    const storageRef = ref(storage, storagePath);

    const snapshot = await uploadBytes(storageRef, blob, {
      contentType: asset.mimeType || "image/jpeg"
    });

    const downloadURL = await getDownloadURL(snapshot.ref);

    return {
      downloadURL,
      storagePath,
      fileName
    };
  } finally {
    if (typeof blob.close === "function") {
      blob.close();
    }
  }
}

This example assumes that userId is a trusted identifier from the currently authenticated user and that the Storage Rules permit the operation. The example's JPEG metadata is a fallback, not proof that the file is actually a JPEG. For production, derive the content type from validated file information and enforce the accepted types through Security Rules.

9.2 Explanation of the Upload Code

10. Displaying the Uploaded Image in React Native

After retrieving the download URL, the application can display the image using React Native's Image component.

10.1 Example Image Display

import React from "react";
import { Image, View, Text } from "react-native";

export default function UploadedImage({ imageUrl }) {
  if (!imageUrl) {
    return No image uploaded yet.;
  }

  return (
    
      <img>
    
  );
}

10.2 Important Image Display Points

• The image source uses an object containing the URL.
• The image should have explicit dimensions or appropriate layout constraints.
• Show a placeholder while the image is loading if necessary.
• Handle missing or invalid URLs.
• Use appropriate access controls for private content.
• Do not treat possession of a download URL as a replacement for authorization design.

11. Uploading Documents and Other Files

Firebase Storage can store PDFs, text documents, spreadsheets, audio, video, and other supported file formats. For documents, use a document picker rather than an image picker.

11.1 Selecting a Document

import * as DocumentPicker from "expo-document-picker";

export async function selectDocument() {
  const result = await DocumentPicker.getDocumentAsync({
    type: ["application/pdf"],
    copyToCacheDirectory: true,
    multiple: false
  });

  if (result.canceled) {
    return null;
  }

  return result.assets[0];
}

This example restricts the picker to PDF files for the user experience. A file picker filter does not guarantee that the content is safe or that its real type matches the declared type.

11.2 Upload a Selected Document

import {
  ref,
  uploadBytes,
  getDownloadURL
} from "firebase/storage";
import { storage } from "./firebaseConfig";
import { uriToBlob } from "./fileHelpers";

export async function uploadDocument(asset, userId) {
  if (!asset?.uri) {
    throw new Error("No document was selected.");
  }

  const fileName = asset.name || `document-${Date.now()}.pdf`;
  const storagePath =
    `users/${userId}/documents/${Date.now()}-${fileName}`;

  const blob = await uriToBlob(asset.uri);

  try {
    const storageRef = ref(storage, storagePath);

    const snapshot = await uploadBytes(storageRef, blob, {
      contentType: asset.mimeType || "application/pdf"
    });

    const downloadURL = await getDownloadURL(snapshot.ref);

    return {
      fileName,
      storagePath,
      downloadURL,
      size: asset.size ?? null
    };
  } finally {
    if (typeof blob.close === "function") {
      blob.close();
    }
  }
}

11.3 Image Upload vs Document Upload

12. Creating a Reusable File Upload Service

In larger React Native projects, upload logic should be separated from the user interface. A reusable service can be responsible for file conversion, naming, storage references, uploading, and URL retrieval.

12.1 Example Service Structure

src/
  firebase/
    firebaseConfig.js
  services/
    storageService.js
  components/
    ImageUploader.js
  screens/
    ProfileScreen.js
  utils/
    fileHelpers.js

12.2 Advantages of a Reusable Service

• Prevents upload logic from being duplicated across screens.
• Makes error handling more consistent.
• Allows validation rules to be maintained in one place.
• Makes unit testing easier.
• Supports future improvements such as progress tracking and retries.

13. Building an Image Upload Screen

The following screen combines image selection, upload state, error handling, and image preview. It uses the helper functions introduced earlier.

import React, { useState } from "react";
import {
  View,
  Text,
  Button,
  Image,
  ActivityIndicator,
  Alert
} from "react-native";
import * as ImagePicker from "expo-image-picker";
import { uploadImage } from "./storageService";
import { auth } from "./firebaseAuthConfig";

export default function ImageUploadScreen() {
  const [image, setImage] = useState(null);
  const [uploadedUrl, setUploadedUrl] = useState(null);
  const [loading, setLoading] = useState(false);

  async function chooseImage() {
    try {
      const permission =
        await ImagePicker.requestMediaLibraryPermissionsAsync();

      if (!permission.granted) {
        Alert.alert(
          "Permission required",
          "Allow access to select an image."
        );
        return;
      }

      const result =
        await ImagePicker.launchImageLibraryAsync({
          mediaTypes: ["images"],
          allowsEditing: true,
          quality: 0.8
        });

      if (!result.canceled) {
        setImage(result.assets[0]);
        setUploadedUrl(null);
      }
    } catch (error) {
      Alert.alert("Selection failed", error.message);
    }
  }

  async function handleUpload() {
    if (!image) {
      Alert.alert("Select an image", "Choose an image first.");
      return;
    }

    const user = auth.currentUser;

    if (!user) {
      Alert.alert("Sign in required", "Please sign in first.");
      return;
    }

    setLoading(true);

    try {
      const result = await uploadImage(image, user.uid);
      setUploadedUrl(result.downloadURL);
      Alert.alert("Success", "Image uploaded successfully.");
    } catch (error) {
      Alert.alert(
        "Upload failed",
        error.message || "Please try again."
      );
    } finally {
      setLoading(false);
    }
  }

  return (
    
      Upload Profile Image

      <button title="Choose Image">

      {image?.uri && (
        <img>
      )}

      </button>

      {loading && }

      {uploadedUrl && (
        
          Uploaded Image
          <img>
        
      )}
    
  );
}

Configuration note: This example assumes that storageService.js exports the uploadImage() function and firebaseAuthConfig.js exports a correctly initialized Firebase Authentication instance. Adjust import paths and picker APIs to your project.

14. Upload Progress and Upload Tasks

For larger files, it is useful to show users how much of the upload has completed. The Firebase JavaScript SDK provides upload task APIs such as uploadBytesResumable() for supported environments.

14.1 Why Upload Progress Matters

• Users know that the upload is still running.
• Long-running uploads feel more responsive.
• The application can display percentage completion.
• Upload errors can be communicated more clearly.
• Some upload workflows can support pausing and resuming tasks.

14.2 Example with uploadBytesResumable

import {
  ref,
  uploadBytesResumable,
  getDownloadURL
} from "firebase/storage";
import { storage } from "./firebaseConfig";

export function uploadWithProgress(
  blob,
  storagePath,
  contentType,
  onProgress
) {
  const storageRef = ref(storage, storagePath);

  const task = uploadBytesResumable(storageRef, blob, {
    contentType
  });

  const promise = new Promise((resolve, reject) => {
    task.on(
      "state_changed",
      snapshot => {
        const percent =
          snapshot.totalBytes > 0
            ? (snapshot.bytesTransferred / snapshot.totalBytes) * 100
            : 0;

        onProgress?.(percent);
      },
      error => reject(error),
      async () => {
        try {
          const downloadURL =
            await getDownloadURL(task.snapshot.ref);

          resolve({
            downloadURL,
            storagePath
          });
        } catch (error) {
          reject(error);
        }
      }
    );
  });

  return {
    task,
    promise,
    cancel: () => task.cancel(),
    pause: () => task.pause(),
    resume: () => task.resume()
  };
}

Use this pattern only in environments supported by the Firebase SDK's upload task APIs. Test pause, resume, cancellation, and progress events on the actual platforms you support.

14.3 Displaying Upload Progress

const [progress, setProgress] = useState(0);
const [loading, setLoading] = useState(false);

// In your upload handler, call uploadWithProgress(...)
// and pass a callback such as:
percent => setProgress(percent);

// Display the current percentage:
{Math.round(progress)}% uploaded

Keep the progress state in the React component that owns the upload interface. Reset it when a new upload begins, and clean up any active task or listener when the component lifecycle requires it.

15. Saving File Information in Cloud Firestore

Firebase Storage stores the actual file content, while Cloud Firestore can store the information needed by the application to find and describe that file. The database and Storage bucket are separate services, so the application should handle partial failures carefully.

15.1 Example File Metadata

{
  "fileName": "profile-image.jpg",
  "storagePath": "users/user123/images/profile-image.jpg",
  "downloadURL": "https://example-download-url",
  "contentType": "image/jpeg",
  "size": 245760,
  "ownerId": "user123",
  "createdAt": "server timestamp"
}

The URL shown above is only a placeholder. Generate a real URL using Firebase Storage rather than copying an example URL.

15.2 Save Metadata to Firestore

import {
  collection,
  addDoc,
  serverTimestamp
} from "firebase/firestore";
import { db } from "./firestoreConfig";

export async function saveFileMetadata(file, userId) {
  const docRef = await addDoc(
    collection(db, "uploadedFiles"),
    {
      fileName: file.fileName,
      storagePath: file.storagePath,
      downloadURL: file.downloadURL,
      size: file.size ?? null,
      contentType: file.contentType ?? null,
      ownerId: userId,
      createdAt: serverTimestamp()
    }
  );

  return docRef.id;
}

15.3 Recommended Data Design

• Store the Storage path so the application can locate the file in the bucket.
• Store an owner ID to associate the file with the correct user.
• Store the original or display name where appropriate.
• Store timestamps for sorting and audit requirements.
• Store file size and content type if they are useful to the application.
• Restrict Firestore reads and writes with separate Firestore Security Rules.

Important: Uploading a file and saving its Firestore metadata are two separate operations. If the upload succeeds but the database write fails, the file may remain in Storage without a corresponding record. Production applications should plan for retries, cleanup, or reconciliation.

16. File Validation and Size Limits

File validation helps protect application performance, control storage usage, and reduce the risk of accepting unwanted content. Validation should occur in the user interface and be enforced on the server through Firebase Storage Security Rules where possible.

16.1 Client-Side Validation Example

const MAX_FILE_SIZE = 5 * 1024 * 1024;

export function validateImage(asset) {
  if (!asset?.uri) {
    throw new Error("Select an image before uploading.");
  }

  if (
    asset.fileSize != null &&
    asset.fileSize > MAX_FILE_SIZE
  ) {
    throw new Error("The image must be smaller than 5 MB.");
  }

  const allowedTypes = [
    "image/jpeg",
    "image/png",
    "image/webp"
  ];

  if (
    asset.mimeType &&
    !allowedTypes.includes(asset.mimeType)
  ) {
    throw new Error("Unsupported image type.");
  }

  return true;
}

Client-side validation improves the user experience but can be bypassed. The server-side Storage Security Rules must enforce the restrictions that matter for security and resource protection.

16.2 Recommended Validation Checks

17. Firebase Storage Security Rules

Security Rules determine which users can read or write files. Rules should be designed according to the application's authentication model, ownership requirements, permitted file types, and size limits.

17.1 Example: Restrict Uploads to the Authenticated Owner

rules_version = '2';

service firebase.storage {
  match /b/{bucket}/o {
    match /users/{userId}/images/{fileName} {
      allow read: if request.auth != null
                  && request.auth.uid == userId;

      allow write: if request.auth != null
                   && request.auth.uid == userId
                   && request.resource != null
                   && request.resource.size < 5 * 1024 * 1024
                   && request.resource.contentType.matches('image/.*');
    }
  }
}

This is an illustrative rule for a user-owned image path. It permits the authenticated owner to read images in that path and to upload image files smaller than 5 MB. Test it with the Firebase Emulator Suite and adapt it to your application's actual requirements before deployment.

17.2 Understanding the Rules

• request.auth != null requires the user to be authenticated.
• request.auth.uid == userId ensures that the path's user ID matches the signed-in user.
• request.resource.size checks the incoming file size for uploads.
• request.resource.contentType checks the declared content type.
• request.resource != null prevents this upload-specific condition from treating a delete request as a new file upload.

Because writes can include uploads, metadata updates, and deletes, carefully design rules for each operation. In particular, an upload-only rule may not permit deletion. Add a separate deletion condition if deletion is required, and test both existing and new objects.

17.3 Security Best Practices

• Never use unrestricted read and write rules in a production application.
• Do not assume that hiding a screen or button secures a file.
• Require authentication when files should belong to signed-in users.
• Check ownership in the storage path.
• Enforce file size and content type restrictions through rules.
• Keep private documents in protected locations.
• Review Firebase Authentication and Storage Rules together.
• Use the Firebase Emulator Suite to test allowed and denied operations.

18. Handling Upload Errors

Uploads may fail because of network problems, authentication issues, invalid file data, unavailable resources, or Storage Security Rules. A good application should display a clear message and avoid losing the user's selection unnecessarily.

18.1 Common Errors and Solutions

18.2 Use Try-Catch-Finally

async function handleFileUpload() {
  setLoading(true);

  try {
    const result = await uploadSelectedFile();
    console.log("Upload completed:", result);
  } catch (error) {
    console.error("Upload error:", error);
    Alert.alert(
      "Upload failed",
      "Please check your connection and try again."
    );
  } finally {
    setLoading(false);
  }
}

Log technical details for debugging without exposing private file URLs, access tokens, or other sensitive information in user-facing messages.

19. Managing File Names and Storage Paths

Organized storage paths make files easier to locate and help Security Rules enforce ownership. Avoid using an original file name as the only identifier because different users can upload files with identical names.

19.1 Example Folder Structure

users/
  user123/
    profile/
      profile-image.jpg
    images/
      1729000000000-photo.jpg
    documents/
      1729000000000-resume.pdf
  user456/
    profile/
      profile-image.jpg

19.2 Naming Recommendations

• Use unique names or identifiers to reduce accidental overwrites.
• Organize files by authenticated user ID when access is user-specific.
• Keep file paths predictable and consistent.
• Sanitize names before using them in storage paths.
• Consider timestamps or generated identifiers to distinguish uploads.
• Store the path in the database if the application needs to locate the file later.

20. Deleting Uploaded Files

Applications may need to delete a profile picture, remove an attachment, or clean up an outdated document. Firebase Storage provides deleteObject() for deleting a file from a storage reference.

20.1 Example Deletion Function

import {
  ref,
  deleteObject
} from "firebase/storage";
import { storage } from "./firebaseConfig";

export async function deleteStoredFile(storagePath) {
  if (!storagePath) {
    throw new Error("A storage path is required.");
  }

  const fileRef = ref(storage, storagePath);
  await deleteObject(fileRef);

  return true;
}

20.2 Deletion Considerations

• Ensure that the current user is authorized to delete the file.
• Use the stored path rather than guessing the location from a URL.
• Decide how to handle Firestore metadata after deletion.
• Handle the case where the file has already been removed.
• Consider retries and cleanup if database and Storage operations do not both succeed.

Deleting a Storage object does not automatically delete a corresponding Cloud Firestore document. Similarly, deleting a Firestore record does not automatically remove the file. Coordinate both operations deliberately.

21. Performance and Cost Optimization

Good upload design can improve user experience and help control storage and data-transfer costs.

• Compress images: Use an appropriate image quality setting when selecting or processing images.
• Set size limits: Reject unnecessarily large files before upload and enforce limits in Security Rules.
• Show progress: Provide progress feedback for large uploads.
• Avoid repeated uploads: Check whether the user actually changed the selected file.
• Use clear storage paths: Make it easy to find and manage files.
• Clean up unused content: Remove files when appropriate and permitted.
• Paginate file listings: Avoid loading an unnecessarily large number of file records at once.
• Handle retries carefully: Use unique names or idempotent workflows to avoid duplicate objects.
• Monitor usage: Review Firebase and Google Cloud usage, quotas, and billing information.

22. Best Practices for React Native File Uploads

1. Keep Firebase initialization in a central configuration module.
2. Separate file selection from upload logic.
3. Validate selected file information before starting an upload.
4. Convert local file URIs into an uploadable format supported by the SDK.
5. Use unique and well-organized storage paths.
6. Use Firebase Authentication where access should be restricted to signed-in users.
7. Enforce access, size, and content-type restrictions through Storage Security Rules.
8. Show loading and progress indicators when appropriate.
9. Handle cancellations, upload failures, and URL retrieval errors.
10. Store useful file metadata in Cloud Firestore when needed.
11. Plan for partial failures between Storage and Firestore.
12. Test on physical Android and iOS devices where applicable.
13. Check platform-specific file access and picker behavior.
14. Avoid placing private files in publicly accessible locations without a deliberate access policy.
15. Review current Firebase and Expo documentation before upgrading dependencies.

23. Mini Project: Profile Image and Document Upload App

Project Objective: Build a React Native application where authenticated users can upload a profile image and a PDF document, view the uploaded image, and manage their uploaded files.

23.1 Project Features

• User sign-in using Firebase Authentication.
• Profile image selection through Expo Image Picker.
• Document selection through Expo Document Picker.
• File validation before upload.
• Firebase Storage upload functionality.
• Progress and loading indicators.
• Download URL retrieval for uploaded files.
• File metadata storage in Cloud Firestore.
• Uploaded image preview.
• File deletion for authorized users.
• Storage Security Rules for ownership and file restrictions.

23.2 Suggested Project Workflow

1. Create a Firebase project and enable the required services.
2. Configure Firebase Authentication and Storage.
3. Create the Firebase configuration module.
4. Build the profile screen with image and document selection buttons.
5. Validate the selected file's size and type.
6. Convert the local file URI to compatible binary data.
7. Upload the file to the appropriate user-specific path.
8. Retrieve the download URL after a successful upload.
9. Save the file metadata to Cloud Firestore.
10. Display the uploaded image and document details.
11. Test permission failures and invalid file selection.
12. Implement authorized deletion and clean up associated metadata.

23.3 Expected Result

The completed application should allow an authenticated user to select supported files, upload them securely to Firebase Storage, display the uploaded image, and view the stored file information. Unauthorized users should not be able to access or modify another user's private files.

24. Practice Exercises

1. Create a React Native screen that selects an image from the device.
2. Upload the selected image to Firebase Storage.
3. Display the download URL's image using the React Native Image component.
4. Add a maximum file-size check before uploading.
5. Build a document picker that accepts PDF files.
6. Save file name, Storage path, content type, and owner ID in Cloud Firestore.
7. Add an upload progress indicator.
8. Write Storage Security Rules that restrict users to their own storage paths.
9. Implement file deletion and handle failures.
10. Test how the application responds when the network disconnects during an upload.

25. Interview Questions and Answers

Q1. What is Firebase Storage?

Firebase Storage is a cloud-based service used to upload, store, and retrieve files such as images, documents, audio, and video in an application.

Q2. Why is Firebase Storage useful in React Native?

It provides managed cloud file storage and integrates with Firebase Authentication and other Firebase services, reducing the need to operate a separate file storage server.

Q3. What is a Storage reference?

A Storage reference represents a location or object path in the Storage bucket. It is used to perform operations such as uploading, retrieving URLs, and deleting files.

Q4. What does uploadBytes() do?

uploadBytes() uploads supported binary file data to a specified Firebase Storage reference and returns information about the completed upload.

Q5. What does getDownloadURL() do?

getDownloadURL() retrieves a URL that can be used to access a stored object, subject to the URL and storage access configuration.

Q6. Why do we use Expo Image Picker?

Expo Image Picker lets users select images from their device's media library and, where supported, capture images using the camera.

Q7. Why might a local URI need conversion before uploading?

A picker may return a local URI rather than binary file data. The upload method requires an accepted data format, so the application may need to read or convert the file first.

Q8. What is the difference between Firebase Storage and Cloud Firestore?

Firebase Storage stores file content, while Cloud Firestore stores structured application data such as file names, owners, timestamps, and Storage paths.

Q9. How can file uploads be secured?

Use Firebase Authentication and Storage Security Rules to enforce ownership, access permissions, allowed content types, and size restrictions.

Q10. Why is client-side validation not enough?

Client-side checks can be bypassed. Important restrictions must also be enforced on the server through Security Rules or other trusted validation systems.

Q11. How can upload progress be tracked?

In supported environments, use uploadBytesResumable() and listen to task state changes to calculate progress from the transferred and total bytes.

Q12. What should happen if an upload succeeds but the Firestore write fails?

The application should handle the partial failure, retry the metadata write where appropriate, or run a cleanup or reconciliation process to prevent orphaned files.

Q13. How can a file be deleted?

Create a reference to the stored object and call deleteObject(), provided the current user is authorized by the Storage Security Rules.

Q14. Why should storage paths include the user's ID?

User-specific paths make file organization easier and allow Security Rules to compare the path's user ID with the authenticated user's ID.

Q15. What is the purpose of file metadata?

Metadata describes the stored file and may include its content type, size, name, and other application-specific details. This information can support validation and file management.

26. Quick Revision Checklist

• Firebase project and Storage bucket are configured.
• Firebase SDK is installed and initialized correctly.
• Image Picker or Document Picker is installed as needed.
• The user can select an image or document.
• File type and size are validated.
• Local file data is converted to an accepted upload format.
• A unique Storage path is generated.
• The file is uploaded with the appropriate method.
• The application retrieves a download URL when needed.
• Uploaded images are displayed with a valid source and layout.
• File metadata is saved if the application needs it.
• Storage Security Rules restrict unauthorized access.
• Loading states, errors, and cancellation are handled.
• Deletion and partial-failure workflows are considered.
• The implementation is tested on target devices and platforms.

27. Official Learning Resources

• Firebase Cloud Storage Documentation
• Uploading Files with the Firebase JavaScript SDK
• Firebase Storage Security Rules
• Firebase Storage JavaScript API Reference
• Using Firebase with Expo
• Expo Image Picker Documentation
• Expo Document Picker Documentation
• React Native Training at JustAcademy
• Register for a JustAcademy Course Demo
• Visit JustAcademy

28. Conclusion

Uploading images and files using Firebase Storage is an important skill in React Native development. It enables applications to store user-generated content in the cloud, retrieve files through download URLs, and organize file information with Cloud Firestore.

A reliable implementation combines correct Firebase configuration, device file selection, compatible file conversion, upload handling, validation, progress feedback, and secure Storage Rules. By practicing these concepts through a profile image and document upload project, learners can build a foundation for more advanced features such as media sharing, document management, and cloud-backed user profiles.